<template>
	<view class="container">

		<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/202015460402.jpg" mode="aspectFill"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/202015460402.jpg" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="box-tip">
			<view class="item f26 c666">
				<image src="../../static/images/icon_dui.png" mode="aspectFit"></image>提高销售
			</view>
			<view class="item f26 c666">
				<image src="../../static/images/icon_dui.png" mode="aspectFit"></image>增加店铺流量
			</view>
			<view class="item f26 c666">
				<image src="../../static/images/icon_dui.png" mode="aspectFit"></image>合作共赢
			</view>
		</view>
		<scroll-view scroll-x="true" @scroll="scroll" scroll-left="120">
			<view class="shopScroll">
				<view class="shop-item">
					<view class="pic">
						<image src="../../static/images/201916541220.jpg" mode="aspectFit"></image>
					</view>
					<view class="name f30 c333">良品铺子</view>
					<view class="brief f26 c666">零食批发</view>
					<view class="store f30">进店</view>
					<view class="vip"><image src="../../static/images/vip01.png" mode="aspectFit"></image></view>
				</view>
				<view class="shop-item">
					<view class="pic">
						<image src="../../static/images/201916541220.jpg" mode="aspectFit"></image>
					</view>
					<view class="name f30 c333">良品铺子</view>
					<view class="brief f26 c666">零食批发</view>
					<view class="store f30">进店</view>
					<view class="vip"><image src="../../static/images/vip02.png" mode="aspectFit"></image></view>
				</view>
				<view class="shop-item">
					<view class="pic">
						<image src="../../static/images/201916541220.jpg" mode="aspectFit"></image>
					</view>
					<view class="name f30 c333">良品铺子</view>
					<view class="brief f26 c666">零食批发</view>
					<view class="store f30">进店</view>
					<view class="vip"><image src="../../static/images/vip03.png" mode="aspectFit"></image></view>
				</view>
				
				<view class="shop-item">
					<view class="pic">
						<image src="../../static/images/201916541220.jpg" mode="aspectFit"></image>
					</view>
					<view class="name f30 c333">良品铺子</view>
					<view class="brief f26 c666">零食批发</view>
					<view class="store f30">进店</view>
				</view>
				
				<view class="shop-item">
					<view class="pic">
						<image src="../../static/images/201916541220.jpg" mode="aspectFit"></image>
					</view>
					<view class="name f30 c333">良品铺子</view>
					<view class="brief f26 c666">零食批发</view>
					<view class="store f30">进店</view>
				</view>
			</view>
		</scroll-view>
		<view class="market-box">
			<view class="market-li">
				<view class="left">
					<view class="pic">
						<image src="../../static/images/201916541220.jpg" mode="aspectFit"></image>
					</view>
					<view class="text">
						<view class="name f30 c333">童话世界</view>
						<view class="brief f28 c666">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</view>
					</view>
				</view>
				<view class="right">
					<view class="store f30">进店</view>
				</view>
			</view>
			<view class="market-li">
				<view class="left">
					<view class="pic">
						<image src="../../static/images/201916541220.jpg" mode="aspectFit"></image>
					</view>
					<view class="text">
						<view class="name f30 c333">童话世界</view>
						<view class="brief f28 c666">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</view>
					</view>
				</view>
				<view class="right">
					<view class="store f30">进店</view>
				</view>
			</view>
			<view class="market-li">
				<view class="left">
					<view class="pic">
						<image src="../../static/images/201916541220.jpg" mode="aspectFit"></image>
					</view>
					<view class="text">
						<view class="name f30 c333">童话世界</view>
						<view class="brief f28 c666">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</view>
					</view>
				</view>
				<view class="right">
					<view class="store f30">进店</view>
				</view>
			</view>
			<view class="market-li">
				<view class="left">
					<view class="pic">
						<image src="../../static/images/201916541220.jpg" mode="aspectFit"></image>
					</view>
					<view class="text">
						<view class="name f30 c333">童话世界</view>
						<view class="brief f28 c666">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</view>
					</view>
				</view>
				<view class="right">
					<view class="store f30">进店</view>
				</view>
			</view>
			<view class="market-li">
				<view class="left">
					<view class="pic">
						<image src="../../static/images/201916541220.jpg" mode="aspectFit"></image>
					</view>
					<view class="text">
						<view class="name f30 c333">童话世界</view>
						<view class="brief f28 c666">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</view>
					</view>
				</view>
				<view class="right">
					<view class="store f30">进店</view>
				</view>
			</view>
			<view class="market-li">
				<view class="left">
					<view class="pic">
						<image src="../../static/images/201916541220.jpg" mode="aspectFit"></image>
					</view>
					<view class="text">
						<view class="name f30 c333">童话世界</view>
						<view class="brief f28 c666">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</view>
					</view>
				</view>
				<view class="right">
					<view class="store f30">进店</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	swiper,
	.swiper-item,
	.swiper-item image {
		width: 100%;
		height: 310upx;

	}

	.box-tip {
		background-color: $white-background;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 15upx 35upx;

		.item {
			image {
				width: 35upx;
				height: 35upx;
				margin-right: 20upx;
				vertical-align: middle;
				margin-bottom: 4upx;
			}
		}
	}

	.shopScroll {
		padding: 30upx 30upx 0 30upx;
		white-space: nowrap;
		.shop-item {
			width: 220upx;
			height: 330upx;
			background-color: $white-background;
			border-radius: 10upx;
			text-align: center;
			padding: 40upx 30upx;
			display: inline-block;
			margin-right: 20upx;
			position: relative;
            .vip{
				image{
					width: 40upx;
					height: 50upx;
					position: absolute;
					top:0;
					left: 0;
					margin-left: 10upx;
				}
			}
			.pic {
				margin-bottom: 35upx;

				image {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
				}
			}

			.name {
				margin-bottom: 25upx;
				font-weight: bold;
			}

			.store {
				margin: 35upx auto 25upx auto;
				width: 110upx;
				height: 50upx;
				line-height: 50upx;
				border: 2upx #249AF6 solid;
				border-radius: 10upx;
				color: #249AF6;
			}
		}
	}

	.market-box {
		margin-top: 30upx;

		.market-li {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 30upx 40upx;
			background-color: $white-background;
			margin-bottom: 20upx;

			.left {
				width: 60%;
				display: flex;
				flex-direction: row;

				.pic {
					image {
						width: 100upx;
						height: 100upx;
						margin-right: 30upx;
						border-radius: 50%;
						vertical-align: middle;
					}
				}

				.text {
					width: 100%;
					margin-top: 10upx;

					.name {
						margin-bottom: 10upx;
					}

					.brief {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}

			.right {
				.store {
					width: 115upx;
					height: 50upx;
					line-height: 50upx;
					color: #249AF6;
					border: 2upx #249AF6 solid;
					text-align: center;
					border-radius: 10upx;
				}

			}
		}
	}
</style>
